﻿@page
@model KentNoteBook.WebApp.Pages.UserAccounts.UsersModel
@{
	ViewData["Title"] = "Users";

	Layout = null;
}

<!--- Breadcrumbs -->
<ol class="breadcrumb">
	<li class="breadcrumb-item">
		<a href="#" ajax-link="true" data-url="/dashboard" data-update-panel=".main-container">Dashboard</a>
	</li>
	<li class="breadcrumb-item">
		<a href="#" ajax-link="true" data-url="/UserManagement/Users" data-update-panel=".main-container">User Management</a>
	</li>
	<li class="breadcrumb-item active">Users</li>
</ol>

<form method="post">
	<div id="alert_panel"></div>
	<div class="form-group row">
		<button type="button" class="btn btn-primary btn-sm ml-3 mr-1" data-toggle="modal" data-target="#modal_dialog_layout" data-modal-title="Add User" data-modal-url="/UserManagement/Dialog/UserEdit" data-modal-size="lg"><i class="fa fa-fw fa-plus mr-1"></i>Add</button>
		<button type='button' class='btn btn-danger btn-sm mr-1' data-toggle='modal' data-target='#modal_confirm_layout' data-url='/UserManagement/Users?handler=Remove' data-alert-panel='#alert_panel' data-update-panel='#tbUsers'><i class='fa fa-fw fa-remove mr-1'></i>Remove All</button>
	</div>

	<div id="tbUsers" class="mb-3" style="min-height: calc(100% - 157px);"></div>

	@Html.DataGrid(
		name:"tbUsers",
		dataSourceUrl:"/UserManagement/Users?handler=Users",
		columns : new List<GridColumn>
		{
			new GridColumn{ Selectable=true,Filterable=false,Template="<input class='k-checkbox' data-role='checkbox' name='idArray' id='Id_#=Id #' aria-label='Select row' aria-checked='false' type='checkbox' value='#=Id #'><label for='Id_#=Id #' class='k-checkbox-label k-no-text'>&#8203;</label>",Width=35,},
			new GridColumn{ Field=nameof(SystemUser.Name), DataType=GridColumnDataType.String,Width=160},
			new GridColumn{ Field=nameof(SystemUser.Email), DataType=GridColumnDataType.String,Width=180},
			new GridColumn{ Field=nameof(SystemUser.IsActive),DataType=GridColumnDataType.Boolean,Width=100},
			new GridColumn{ Field=nameof(SystemUser.CreatedDate), DataType=GridColumnDataType.Date,Format="{0:yyyy-MM-dd HH:mm:ss}"},
			new GridColumn{
				Title ="Actions",
				Template ="<button type='button' class='btn btn-primary btn-sm ml-auto mr-1' data-toggle='modal' data-target='\\#modal_dialog_layout' data-modal-title='Edit User' data-modal-url='/UserManagement/Dialog/UserEdit/#=Id #' data-modal-size='lg'><i class='fa fa-fw fa-edit mr-1'></i>View/Edit</button>" +
				"<button type='button' class='btn btn-primary btn-sm ml-auto mr-1' data-toggle='modal' data-target='\\#modal_dialog_layout' data-modal-title='View/Edit Roles in User' data-modal-url='/UserManagement/Dialog/RolesInUserEdit/#=Id #' data-modal-size='lg'><i class='fa fa-fw fa-edit mr-1'></i>Roles</button>"+
				"<button type='button' class='btn btn-danger btn-sm mr-1' data-toggle='modal' data-target='\\#modal_confirm_layout' data-url='/UserManagement/Users?handler=Remove&idArray=#=Id #' data-alert-panel='\\#alert_panel' data-update-panel='\\#tbUsers'><i class='fa fa-fw fa-remove mr-1'></i>Remove</button>",
				Width =200
			},
		},
		criteria :new GridCriteria {
			SortBy =nameof(SystemUser.CreatedDate),
			SortDirection = SortDirection.Descending
		})
	<script type="text/javascript">


		function titleFilter(element) {
			element.kendoAutoComplete({
				dataSource: titles
			});
		}

		function cityFilter(element) {
			element.kendoDropDownList({
				dataSource: cities,
				optionLabel: "--Select Value--"
			});
		}
									   // columns: [
									   //     {
									   //         title: "Name",
									   //         width: 160,
									   //         filterable: false,
									   //         template: "#=FirstName# #=LastName#"
									   //     },
									   //     {
									   //         field: "City",
									   //         width: 130,
									   //         filterable: {
									   //             ui: cityFilter
									   //        }
									   //     },
									   //     {
									   //         field: "Title",
									   //         filterable: {
									   //             ui: titleFilter
									   //         }
									   //     },
									   //     {
									   //         field: "BirthDate",
									   //         title: "Birth Date",
									   //         format: "{0:MM/dd/yyyy HH:mm tt}",
									   //         filterable: {
									   //             ui: "datetimepicker"
									   //         }
									   //     }
									   //]									//$(function () {
													//	$('#datetimepicker11').daterangepicker({
													//		autoApply: true,
													//		autoUpdateInput: true,
													//		singleDatePicker: true,
													//		showDropdowns: true,
													//		timePicker: true,
													//		timePicker24Hour: true,
													//		timePickerSeconds: true,
													//		timePickerIncrement: 1,
													//		locale: {
													//			cancelLabel: 'Clear',
													//			format: 'YYYY/MM/DD H:mm:ss'
													//		}
													//	});

													//	$('#datetimepicker11').on('apply.daterangepicker', function (ev, picker) {
													//		//debugger;
													//		//$(this).val(picker.startDate.format('YYYY/MM/DD H:mm:ss'));
													//	});
													//});
	</script>

</form>

